<template>
    <div class="loginTool">
        <div class="title">欢迎{{ loginUser }},使用</div>
        <img class="img" src="../static/images/bg.jpg" />
        <van-form @submit="onSubmit" class="bg">
            <van-field
                v-model="username"
                name="username"
                label="用户名"
                placeholder="请输入用户名"
                maxlength="15"
                :rules="[{ required: true, message: '请填写用户名' }]"
            />
            <van-field
                v-model="tel"
                type="tel"
                name="tel"
                label="手机号"
                placeholder="请输入手机号"
                maxlength="11"
                :rules="phoneRules"
            />

            <div style="margin: 16px">
                <van-button round block type="info" native-type="submit">
                    <span class="iconfont icon-home"></span>提交
                </van-button>
            </div>
        </van-form>
    </div>
</template>

<script>
import Vue from "vue";
import Vant from "vant";
import { validPhone } from "../utils/validate.js";
import "vant/lib/index.css";
Vue.use(Vant);
export default {
    name: "loginTool",
    components: {},
    props: {
        loginUser: {
            type: String,
            default: "王毅",
        },
    },
    data() {
        this.phoneRules = [
            { required: true, message: "请输入手机号" },
            { validator: this.phoneValidator, message: "手机号格式错误" },
        ];
        return {
            username: "",
            tel: "",
            createTime: "20201016 135211",
        };
    },
    methods: {
        // 手机号码的验证
        phoneValidator(val) {
            return validPhone(val);
        },
        onSubmit(values) {
            var _this = this;
            let loginForm = {
                name: "admin",
                password: "123",
            };
        },
    },
};
</script>

<style rel="stylesheet/scss" lang="scss">
@import "../static/css/mixin.scss";
.loginTool {
    .title {
        font-size: 30px;
        text-align: center;
        font-weight: 700;
        margin: 20px;
    }
    .img {
           @include wh(100%,300px);
        // width: 100%;
        // height: 300px;
        background: url("../static/images/bg.jpg");
        background-size: 100% 100%;
    }
}
</style>
